{% extends "auth/base.html" %}
<script>
    $(function() {
        $("#password").keypress(function(e) {
            var key = e.which;
            if (key == 13) {
                login();
            }
        });
    });
</script>
{% block container_outer %}
<div id="container" class="container-fluid common-margin" style="margin-right: auto;margin-left: auto; margin-top: 40px;">
	<style type="text/css">
		.login-logo{
			text-align: center;
			position:absolute;
			background: #f45d54;
			display: table;
		}
		.login-form{
			position:absolute;
			left: 265px;
			top: 0;
			border-radius: 4px 0 4px 0;
		}
		.login-form .panel-heading{
			text-align: center;
			height: 180px;
			line-height: 180px;
			font-size: 34px;
			font-family: CenturyGothic;
			font-weight: 300;
		}
		.common-margin{
			width: 759px
		}
		.login-logo{
			width: 265px;
			height: 580px;
		}
		.login-form{
			width: 494px;
			height: 580px;
		}
		.login-form .form-control{
			height: 45px;
			padding-left: 28px;
		}
		.login-form .form-sign{
			width: 323px;
			margin: 0 auto;
		}
		.login-form .panel-heading{
			height: 180px;
			line-height: 180px;
			font-size: 34px;
		}
		.login-icon{
			top: 17px;
			left: 10px;
		}
		button{
			height: 45px;
		}
	</style>
	<div class="row">
		<div class="col-md-12" style="padding: 0">
			<div style="margin: 0 auto; width: 759px;position:relative;">
				<div class="login-logo">
   					<span style="display: table-cell; vertical-align: middle; ">
       					<img src="../../static/img/earth-min.png" alt="" style="width: 100%;">
   					</span>
				</div>
				<div class="panel login-form">
					<div class="panel-heading">
						登录/Sign In
					</div>
					<div class="panel-body">
						<div class="form-sign" role="form">
							<div class="form-group" style="position: relative;">
								<span class="glyphicon glyphicon-user login-icon" style="position: absolute;color: #959696;"></span>
								<input type="text" placeholder="用户名" id="name" class="form-control" required autofocus />
							</div>
							<div class="form-group" style="position: relative;">
								<span class="glyphicon glyphicon-lock login-icon" style="position: absolute;color: #959696;"></span>
								<input type="password" placeholder="密码" id="password" class="form-control" required />
							</div>
							<button class="btn btn-default btn-block" type="button" id="sign" style="background-color: #f45d54;
								color: #ffffff;
								border-color: #fff;
								border-radius: 8px;"
								onclick="login();">登录</button>

							<div style="margin-top: 10px">
								没有账户? <a href="/auth/register" style="color: #f45d54;">注册</a>
							</div>

						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
</div>
{%endblock%}